<template>
  <div class="box">
    <van-index-bar highlight-color="#000" :sticky="false" :index-list="computedCityList" @select="handleSelect">
      <div v-for="data in cityList" :key="data.type">
        <van-index-anchor :index="data.type" />
        <van-cell :title="item.name" v-for="(item,index) in data.list" :key="index" @click="cityClick(item.name, item.cityId)" />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  name: 'CityList',
  props: ['cityList'],
  computed: {
    computedCityList() {
      return this.cityList.map(item => item.type)
    }
  },
  methods: {
    handleSelect(index) {
      this.$toast(index)
    },
    cityClick(name, id) {
      this.$store.commit('changeCityName', name)
      this.$store.commit('changeCityId', id)
      this.$store.commit('changeSelectCity', true)
      this.$router.back()
    }
  }
}
</script>

<style scoped>
</style>